<template>
    <p>
        <button :disabled="active === 1" @click="active--">&lt;</button>
        <button v-for="i in maxpage" @click="active = i" :class="{'active': active === i}">{{ i }}</button>
        <button :disabled="active === maxpage" @click="active++">&gt;</button>
    </p>
    
</template>
<script>
export default {
    data(){
        return {
            active: 1,
            maxpage:20,
        }
    }
}
</script>
<style>
    .active {
        color: red;
    }
</style>